﻿<FluentStack>
    <FluentKeyCode OnKeyDown="@KeyDownHandler">
        <FluentCard tabindex="0" Width="300px" Height="140px">
            Click here and press <FluentKeyCode tabindex="0" OnKeyDown="@KeyDownHandler" StopPropagation="true">any key</FluentKeyCode> to get the event keycode info.
        </FluentCard>
    </FluentKeyCode>

    <ul>
        <li><span>Value:</span> <code>@LastKeyCode?.Value</code></li>
        <li><span>Key:</span> <code>@LastKeyCode?.Key.ToString()</code></li>
        <li><span>Code:</span> <code>@LastKeyCode?.KeyCode</code></li>
        <li>
            <span>Meta:</span>
            @if (LastKeyCode?.ShiftKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyboardShift())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyboardShift())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.CtrlKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ControlButton())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ControlButton())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.AltKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyCommand())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyCommand())" Color="Color.Neutral" />
            }
            @if (LastKeyCode?.MetaKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ArrowBounce())" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ArrowBounce())" Color="Color.Neutral" />
            }
        </li>
        <li><span>Location:</span> <code>@LastKeyCode?.Location.ToString()</code></li>
        <li><span>TargetId:</span> <code>@LastKeyCode?.TargetId</code></li>
        <li><span>Repeat:</span> <code>@LastKeyCode?.Repeat</code></li>
    </ul>
</FluentStack>

<style>
    li > span {
        float: left;
        width: 70px;
        font-weight: bold;
    }
</style>

@code
{
    FluentKeyCodeEventArgs? LastKeyCode;

    void KeyDownHandler(FluentKeyCodeEventArgs e)
    {
        LastKeyCode = e;
    }
}
